<template>
  <div class="leftSlide">
    <div class="main-body">
      <span :class="Math.random()<0.3?'animate1':Math.random()>0.6?'animate2':'animate3'"
            :style="{opacity:Math.random()}"
            v-for="i in 100"
            :key="i"></span>
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.main-body {
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ2335L918-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635060967&t=4b650943b9e50ab9aff608e9717d5598");
  background-position: center;
  width: 540px;
  height: 540px;
}
.main-body span {
  float: left;
  width: 50px;
  height: 50px;
  margin: 2px;
}
.animate1 {
  animation: shineSquare1 8s linear infinite;
}
.animate2 {
  animation: shineSquare2 8s linear infinite;
}
.animate3 {
  animation: shineSquare3 8s linear infinite;
}
@keyframes shineSquare1 {
  from {
    background: #0990cb;
  }
  20% {
    background: #123496;
  }
  40% {
    background: #003366;
  }
  60% {
    background: #2345d7;
  }
  80% {
    background: #044d9b;
  }
  to {
    background: #003366;
  }
}
@keyframes shineSquare2 {
  from {
    background: #003366;
  }
  20% {
    background: #6666ff;
  }
  40% {
    background: #003366;
  }
  60% {
    background: #0990cb;
  }
  80% {
    background: #044d9b;
  }
  to {
    background: #003366;
  }
}
@keyframes shineSquare3 {
  from {
    background: #003366;
  }
  20% {
    background: #0990cb;
  }
  40% {
    background: #003366;
  }
  60% {
    background: #044d9b;
  }
  80% {
    background: #2277dd;
  }
  to {
    background: #003366;
  }
}
</style>